<template>
	<div class="">
				<swiper :options="swiperOption" class="swiper-box">
					<swiper-slide><img src="//cb-yunxuan.oss-cn-hangzhou.aliyuncs.com/998c02a20c4f6f0fae0c27c9bb679082.jpg"/></swiper-slide>
					<swiper-slide>Slide 2dfsdfs</swiper-slide>
					<swiper-slide>Slide 3</swiper-slide>
					<swiper-slide>Slide 4</swiper-slide>
					<swiper-slide>Slide 5</swiper-slide>
					<swiper-slide>Slide 6</swiper-slide>
					<swiper-slide>Slide 7</swiper-slide>
					<swiper-slide>Slide 8</swiper-slide>
					<swiper-slide>Slide 9</swiper-slide>
					<swiper-slide>Slide 10</swiper-slide>
					<div class="swiper-pagination" slot="pagination"></div>
				</swiper>
	</div>

</template>

<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
		components: {
	    swiper,
	    swiperSlide
	  },
    data() {
      return {
				swiperOption: {
				 pagination: '.swiper-pagination',
				 paginationClickable: true
			 }
      }
    }
  }
</script>

<style scoped>
  html,body {
    position: relative;
    height: 100%;
  }
  body {
    background: #eee;
  }
  .swiper-box {
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }
	img{
		width: 100%;
		height: 100%;
	}
  .swiper-item {
    height: 100%;
    text-align: center;
    font-size: 18px ;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

</style>
